<template>
  <div class="basic-from">
    <el-form label-width="110px" class="form-wrap basic-form" ref="leaveForm" :model="formData" :rules="rules">
      <el-form-item label="人员状态" prop="personState">
        <el-select v-model="formData.personState" placeholder="请选择人员状态" @change="personStateChange">
          <el-option v-for="item in person_state" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="解除隔离时间" prop="releaseIsolationDate">
        <el-date-picker v-model="formData.releaseIsolationDate" @change="personStateChange" type="datetime" format="yyyy-MM-dd HH:mm:ss" valueFormat="yyyy-MM-dd HH:mm:ss" :picker-options="pickerOptions" placeholder="选择日期"></el-date-picker>
      </el-form-item>
      <el-form-item label="离开隔离点时间" prop="leaveHotelDate">
        <el-date-picker v-model="formData.leaveHotelDate" type="datetime" format="yyyy-MM-dd HH:mm:ss" valueFormat="yyyy-MM-dd HH:mm:ss" :picker-options="pickerOptions" placeholder="选择日期"></el-date-picker>
      </el-form-item>
      <el-form-item label="目的地" prop="location">
        <ProvinceCity v-model="formData.location" />
      </el-form-item>
      <el-form-item label="交通工具" prop="vehicle">
        <el-select v-model="formData.vehicle" placeholder="请选择交通工具" @change="vehicleChange">
          <el-option v-for="item in trip_traffic_way" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="trafficLabel" prop="carNumber">
        <el-input v-model="formData.carNumber" :placeholder="'请输入' + trafficLabel"></el-input>
      </el-form-item>
      <el-form-item label="备注">
        <el-input type="textarea" v-model="formData.remark" placeholder="请输入备注"></el-input>
      </el-form-item>
      <el-form-item prop="changeReason" label="修改原因">
        <el-input type="textarea" v-model="formData.changeReason" placeholder="请输入备注"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="footerBtns">
      <el-button type="primary" @click="save">封存</el-button>
      <el-button @click="$emit('close')">关闭</el-button>
    </div>
  </div>
</template>

<script>
import ProvinceCity from "@/components/ProvinceCity";
import { putLeaveInfo } from "@/views/yq-personnel/api/check.js";
export default {
  components: {
    ProvinceCity,
  },
  inject: ['personId'],
  data () {
    return {
      formData: {
        location: [],
        leaveDestination: "",
        vehicle: "",
        carNumber: "",
        personState: "",
        releaseIsolationDate: "",
        leaveHotelDate: "",
        changeReason: "",
        remark: "",
        personId: "",
        options: [],
      },
      rules: {
        personState: [
          { required: true, message: "请选择人员状态", trigger: "change" },
        ],
        releaseIsolationDate: [
          { required: true, message: "选择解除隔离时间", trigger: "change" },
        ],
        leaveHotelDate: [
          { required: true, message: "选择离开隔离点时间", trigger: "change" },
        ],
        location: [
          { required: true, message: "请选择目的地", trigger: "change" },
        ],
        vehicle: [
          { required: true, message: "请选择交通工具", trigger: "change" },
        ],
        carNumber: [{ required: false, message: "请输入", trigger: "blur" }],
        seatNumber: [
          { required: false, message: "请输入座位号", trigger: "blur" },
        ],
        changeReason: [
          { required: true, message: "请输修改原因", trigger: "blur" },
        ],
      },
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() > Date.now();
        },
      },
      dialogVisible: false,
      type: "",
    };
  },
  computed: {
    trafficLabel: function () {
      let label = "";
      switch (this.formData.vehicle) {
        case "0":
          label = "航班号";
          break;
          break;
        case "2":
          label = "车次号";
          break;
        case "3":
          label = "车牌号";
          break;
        default:
          label = "班次号";
          break;
      }
      let seatRequire =
        this.formData.vehicle == "0" ||
        this.formData.vehicle == "1" ||
        this.formData.vehicle == "2" ||
        this.formData.vehicle == "4";
      this.rules.seatNumber[0].required = seatRequire;
      this.rules.carNumber[0].message = "请输入" + label;
      setTimeout(() => {
        if (this.$refs.leaveForm) {
          this.$refs.leaveForm.clearValidate();
        }
      }, 100);
      return label;
    },

    person_state () {
      return this.getDict("person_state");
    },
    trip_traffic_way () {
      return this.getDict("trip_traffic_way");
    },
  },
  methods: {
    save () {
      this.validateAndSave();
    },
    //开启弹窗,请求数据
    async show ({ type, data = {} }) {
      console.log(data);
      // 请求接口拿到详细数据
      // const res = await this.http(`/api/repairbill/${data.billId}`)
      this.type = type;
      this.dialogVisible = true;
    },
    // 弹窗关闭还原
    handleClosed () {
      this.uploadFileList = [];
      let _formData = JSON.parse(JSON.stringify(this.formData));
      for (let i in _formData) {
        _formData[i] = "";
      }
      this.formData = _formData;
    },

    personStateChange () {
      if (
        this.isEdit &&
        this.formData.personState == "31" &&
        this.memberInfo.moveEndTime &&
        this.formData.releaseIsolationDate
      ) {
        if (
          this.getDateYMD(
            new Date(this.formData.releaseIsolationDate)
          ).getTime() <
          this.getDateYMD(new Date(this.memberInfo.moveEndTime)).getTime()
        ) {
          this.$message({
            showClose: true,
            message: "当前人员未到隔离结束时间，不允许选择期满解除隔离！",
            type: "warning",
          });
          this.formData.personState = "";
        }
      }
      if (
        this.isEdit &&
        this.formData.personState == "43" &&
        this.memberInfo.moveStartTime
      ) {
        if (
          this.getDay(new Date(this.memberInfo.moveStartTime), new Date()) >= 14
        ) {
          this.$message({
            showClose: true,
            message: "当前人员隔离时间大于或等于14天，不允许选择转居家隔离！",
            type: "warning",
          });
          this.formData.personState = "";
        }
      }
    },
    vehicleChange (newVal) {
      if (newVal == "5") {
        this.formData.remark = "自行离开";
      } else {
        this.formData.remark = "";
      }
    },
    validateAndSave () {
      if (
        this.formData.personState == "43" &&
        this.formData.location[1] != "440300"
      ) {
        this.$message.error(
          "目的地为深圳市外居家隔离的旅客，请选择移交其他省市区继续隔离观察！"
        );
        return;
      }
      this.formData.personId = this.personId();
      this.$refs.leaveForm.validate((valid) => {
        if (valid) {
          this.$confirm("确定要保存吗?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }).then(() => {
            // let releaseIsolationDate = new Date(this.leaveForm.releaseIsolationDate);
            // let leaveHotelDate = new Date(this.leaveForm.leaveHotelDate);
            // let moveInDate = new Date(this.memberInfo.moveEndTime);
            // this.leaveForm.personId = this.personId;
            // let data = Object.assign({}, this.leaveForm);
            // data.leaveDestProvince = data.location[0];
            // data.leaveDestination = data.location[1];
            // delete data.location;
            // if (
            //   this.getDateYMD(this.formData.releaseIsolationDate).getTime() <
            //     this.getDateYMD(moveInDate).getTime() &&
            //   this.leaveForm.personState == "31"
            // ) {
            //   this.$message.error("解除隔离时间必须大于入住结束时间");
            // } else if (
            //   leaveHotelDate.getTime() < releaseIsolationDate.getTime()
            // ) {
            //   this.$message.error("离开隔离点时间必须大于解除隔离时间");
            // } else {
            const loading = this.$loading({
              lock: true,
              text: "保存中",
              spinner: "el-icon-loading",
              background: "rgba(0, 0, 0, 0.7)",
            });
            putLeaveInfo(this.formData).then(
              (resp) => {
                loading.close();
                this.$message.success("已保存");
                this.dialogVisible = false;
                this.$emit("resetList");
              },
              (err) => {
                loading.close();
              }
            );
            // }
          });
        }
      });
    },
    // 返回一个只包含年月日的日期对象
    getDateYMD (date) {
      return new Date(date.getFullYear(), date.getMonth(), date.getDate());
    },
    getDay (beginDate, endDate) {
      return Math.floor(
        (endDate.getTime() - beginDate.getTime()) / (24 * 3600 * 1000)
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.footerBtns {
  padding: 20px;
  text-align: right;
}
</style>